import { useState, useEffect } from "react";

export default function Art2(){
    let [name2, setName2 ] = useState("");
    let [nickname2, setNickname2] = useState("");

    // useEffect(
    //     () => {
    //         console.log("Rendering 완료!");
    //         console.log("name2 => ", name2);
    //         console.log("nickname2 => ",  nickname2);
    //     });

    /* 처음 랜터링만 실행, 업데이트 실행 안함 끝에 배열을 넣어준다. */
    // useEffect(
    //     () => {
    //         console.log("Rendering 완료!");
    //         console.log("name2 => ", name2);
    //         console.log("nickname2 => ", nickname2 );
    //     },[])  
        
    /* 특정 값([name2]) Update만 실행 */
    useEffect(() => { console.log("effect");
                      console.log("name2 => ", name2 );
                      return () => {
                         console.log("cleanup!");
                         console.log("name2 => ", name2);
                      }
          },[name2]);    

    return(
        <article>
            <div className="art_area">
                <div className="art_head">
                    RIDAGI 8.2 useEffect
                </div>
                <div className="art_body">
                    <div className="inpt_area">
                        <input name="name2" value={name2}  placeholder="이름2" className="inpt_brd" onChange={ e => {
                            setName2(e.target.value);
                            console.log("name2 : ", e.target.value);
                        }} />
                    </div>
                    <div className="inpt_area">
                        <input name="nickname2" value={nickname2} placeholder="닉네임2" className="inpt_brd" onChange={ e => {
                            setNickname2( e.target.value);
                            console.log("nickname2 : ", e.target.value);
                        }}/>
                    </div>
                </div>
                <div className="art_body">
                        <div className="inpt_area">
                            이름2 : {name2}
                        </div>
                        <div className="inpt_area">
                            닉네임2 : {nickname2}
                        </div>
                </div>
            </div>
        </article>
    );
}